<template>
	<view class="uni-flex uni-column"
		style="height:100%;width:100%;justify-content:space-between;">
		<view>
			<uni-card :is-shadow="false" title="订单信息">
				<view class="uni-flex uni-row" style="padding:10rpx 0;border-bottom:2rpx solid #f5f5f5;">
					<view class="uni-flex uni-column" style="flex-grow:2;">
						<view class="uni-flex uni-row" style="padding:10rpx 0;">
							<view style="color:#181818;">
								<text>发货: </text>
							</view>
							<view style="padding-left:20rpx;color:#7B7B7B;" >
								<view>
									<text>{{order.fromShopName}} {{order.fromAddress}}</text>
								</view>
							</view>
						</view>
						<view class="uni-flex uni-row" style="padding:10rpx 0;">
							<view style="color:#181818;">
								<text>收货: </text>
							</view>
							<view style="padding-left:20rpx;color:#7B7B7B;" >
								<view>
									<text>{{order.toShopName}} {{order.toAddress}}</text>
								</view>
							</view>
						</view>
						<view class="uni-flex uni-row" style="padding:10rpx 0;" v-show="order.transWay == 1">
							<view  style="color:#181818;">
								<text>货物: </text>
							</view>
							<view style="padding-left:20rpx;color:#7B7B7B;">
								<text v-for="goods in order.goodsList">
									{{goods.name}}*{{goods.count}}
								</text>
							</view>
						</view>
						<view class="uni-flex uni-row" style="padding:10rpx 0;" v-show="order.transWay == 2">
							<view  style="color:#181818;">
								<text>包车</text>
							</view>
						</view>
					</view>
					<view style="display:flex;align-items:center;color:#181818;font-size:12pt;">
						<text style="font-size:9pt;">￥</text><text>{{order.payFee}}</text>
					</view>
				</view>
			</uni-card>
			<uni-card :is-shadow="false" title="取消原因">
				<radio-group @change="changeReason">
					<label class="uni-list-cell" style="padding:16rpx 0rpx;justify-content:start;" v-for="(item, index) in items">
						<view>
							<radio :value="item.name" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</uni-card>
		</view>
		
		<view style="padding: 0 30rpx;">
			<button type="primary" style="font-size:12pt;background-color:#FF4D4F;"
				@click="cancel">取消订单</button>
		</view>
	</view>
</template>

<script>
	import { $get, post } from '@/util/request.js';
	
	export default {
		data() {
			return {
				items: [
					{
						name: "发货地址填写错误"
					},
					{
						name: "收货地址填写错误"
					},
					{
						name: "货物选择错误"
					},
					{
						name: "货物数量填写错误"
					},
					{
						name: "暂时不发货了"
					}
				],
				order: {
					
				},
				refund: {
					orderId: 0,
					reason: ''
				}
			}
		},
		onLoad(options) {
			this.refund.orderId = options.orderId;
			
			this.getOrder();
		},
		methods: {
			getOrder() {
				$get('express/order/get?orderId=' + this.refund.orderId).then(res => {
					if (res.success) {
						this.order = res.data;
					}
				});
			},
			changeReason(e) {
				this.refund.reason = e.detail.value;
			},
			cancel() {
				if (this.refund.reason == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择取消原因'
					});
					return;
				}
				post('express/order/cancel', this.refund).then(res => {
					if (res.success) {
						uni.reLaunch({
							url: '/pages/order/order_cancel_success'
						});
					}
				});
			}
		}
	}
</script>

<style>

</style>
